<template>
  <header class="u-mainHeader">
    <div class="u-mainHeader-logo">
      <span>管理后台</span>
    </div>
    <div class="u-mainHeader-userInfo">
      <div class='list'>
        <i></i>
        <p>{{ getUserName ? ('欢迎： ' + getUserName) : '暂无' }}</p>
      </div>
      <div class="list" @click='toMessageList'>
        <i class='u-icon icon icon-info'></i>
        <el-badge :value='msgData' :hidden='!msgData || msgData === "0"'>
          <p>消息</p>
        </el-badge>
      </div>
      <div class="list" @click='showSetPwdBox'>
        <i class='u-icon icon icon-setPwd'></i>
        <p>修改密码</p>
      </div>
      <div class="list" @click='logout'>
        <i class='u-icon icon icon-logout'></i>
        <p>退出登录</p>
      </div>
    </div>

    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      :before-close="() => { this.dialogVisible = false }">
      <el-form class="form" ref='form' label-width="120px" :model="form" :rules='rules'>
        <el-form-item label="原密码：" prop='oldPwd'>
          <el-input type="password" placeholder="请输入原密码" v-model="form.oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop='newPwd'>
          <el-input type="password" placeholder="请输入6位以上数字与字母组合" v-model="form.newPwd"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：" prop='checkNewPwd'>
          <el-input type="password" placeholder="请重新输入新密码" v-model="form.checkNewPwd"></el-input>
        </el-form-item>
        <el-form-item align='right'>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="confirm">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </header>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import md5 from 'blueimp-md5'
import oObserver from '@/util/eventBus'

export default {

  name: 'mainHeader',

  data() {
    return {
      dialogVisible: false,
      form: {
        oldPwd: '',
        newPwd: '',
        checkNewPwd: ''
      },
      rules: {
        oldPwd: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 6, message: '长度至少 6 个字符', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '长度至少 6 个字符', trigger: 'blur' }
        ],
        checkNewPwd: [
          { required: true, message: '请输入确认新密码', trigger: 'blur' },
          { min: 6, message: '长度至少 6 个字符', trigger: 'blur' }
        ]
      },
      ifRequesting: false,
      msgData: ''
    }
  },

  created() {
    const sub = oObserver.createSubscriber()
    sub.addListener('updateFirmId', () => {
      this.getMsg()
    })
    this.requestMsg()
  },

  computed: {
    ...mapGetters(['getUserName'])
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    requestMsg() {
      setTimeout(() => {
        this.getMsg()
        this.requestMsg()
      }, 180000)
    },

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    async getMsg() {
      const { code, data } = await this.$api.userGetMsg({ aFirmId: this.aFirmId })
      if (code === 0) {
        this.msgData = data.count || 0
      }
    },

    async logout() {
      const { code } = await this.$api.adminLogout()
      if (code === 0) {
        window.location.reload()
      }
    },

    showSetPwdBox() {
      this.dialogVisible = true
    },

    confirm() {
      if (this.ifRequesting) return
      this.$refs.form.validate((valid) => {
        if (!valid) return
        if (this.form.newPwd !== this.form.checkNewPwd) {
          this.__notify('警告', '新密码与确认密码不相同', 'warning')
          return
        }
        this.updatePwd()
      })
    },

    async updatePwd() {
      this.ifRequesting = true
      const form = this.form
      const { code } = await this.$api.userUpdatePwd({ aOldPasswd: md5(form.oldPwd), aPasswd: md5(form.newPwd) })
      this.ifRequesting = false
      if (code === 0) {
        this.dialogVisible = false
        this.__notify('修改密码成功')
        this.$router.push({ name: 'main' })
      }
    },

    reset() {
      this.$refs.form.resetFields()
    },

    toMessageList() {
      this.routerPush('message')
      this.$router.push({ name: 'message' })
    }
  }
}
</script>

<style lang="less" >
.u-mainHeader {
  // z-index: 1;
  // position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 0 30px;
  height: 60px;
  color: @t-navbarTc;
  background-color: @t-navbarBg;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);

  &-logo {
    cursor: pointer;
    font-size: 18px;
    padding: 15px 0;
    display: flex;
    align-items: center;
    img {
      width: 44px;
      display: block;
      margin-right: 15px;
    }
  }

  &-userInfo {
    display: flex;
    align-items: center;
    height: 100%;
    .list {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;
      padding: 0 20px;
      p {
        font-size: 14px;
      }
      &:hover {
        background: fade(@t-primary, 50);
        color: #fff;
        cursor: pointer;
        .icon {
          background-position: 0 -20px;
        }
      }
    }
    .icon {
      margin-right: 5px;
      background-size: 100% auto;
      width: 20px;
      height: 20px;
      &-info {
        background-image: url(./../../assets/icon/header_icon_message@2x.png);
      }
      &-setPwd {
        background-image: url(./../../assets/icon/header_icon_password@2x.png);
      }
      &-logout {
        background-image: url(./../../assets/icon/header_icon_quit@2x.png);
      }
    }
  }
}
</style>
